<template>
  <a-card :bordered="false">
    <div class="table-page-search-wrapper">
      <a-row>
        <a-col span="24" style="margin-bottom: 16px; text-align: right">
          <a-button v-has="'BisManualCouponRecordController:send'" type="primary" @click="prepareCoupon" style="margin-right: 8px">{{ $t('发送优惠券') }}</a-button>
          <a-button type="primary" @click="accountShow" style="margin-right: 8px">{{ $t('账户汇总') }}</a-button>
          <a-button
          v-has="'MemberInfoDrawingController:export'"
            type="primary"
            :loading="exloading"
            @click="handleExportXls($t('会员画像'))"
            style="margin-right: 8px"
            >{{ $t('导出') }}</a-button
          >
          <a-button
            @click="screenCondition"
            style="margin-right: 6px; background-color: rgb(20, 203, 151); border-color: rgb(20, 203, 151); color: #fff"
            >{{ $t('刷新') }}</a-button
          >
          <a-button
            @click="openCond"
            style="margin-right: 6px; background-color: #f17a20; border-color: #f17a20; color: #fff"
            >{{ $t('筛选') }}</a-button
          >
          <a-button @click="handleSetColumn" style="background-color: #169bd5; border-color: #169bd5; color: #fff">{{
            $t('设置列')
          }}</a-button>
          <div
            v-if="visible"
            style="
              position: fixed;
              background-color: #fff;
              z-index: 10;
              right: 40px;
              bottom: 20px;
              top: 180px;
              width: 440px;
              padding: 0 20px;
              box-shadow: 0 0 6px rgba(3, 3, 3, 0.5);
            "
          >
            <div style="position: relative; height: -webkit-fill-available">
              <div class="custom-condition-content">
                <div
                  style="
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    padding: 10px 0;
                    border-bottom: 1px solid #eee;
                  "
                >
                  <span>{{ $t('筛选') }}</span>
                  <a-icon type="close" @click="hide" />
                </div>
                <div style="margin: 10px 0; text-align: left">
                  <a-tag
                    v-for="(cond, ind) in condItems"
                    :key="ind"
                    closable
                    @close="delConds(cond, ind)"
                    style="margin-bottom: 4px; background-color: #f59b1e; border-color: #f59b1e"
                  >
                    <div
                      style="
                        color: #fff;
                        display: inline-block;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        max-width: 370px;
                        vertical-align: top;
                      "
                    >
                      {{ cond.label }}：
                      <span v-if="cond.type == 'input' && cond.keyNum == 1">{{ queryData[cond.key] }}</span>
                      <span v-if="cond.type == 'select' && cond.keyNum == 1">{{
                        dictOptions[cond.data.data].filter((dt) => {
                          return dt[cond.data.value] == queryData[cond.key]
                        })[0][cond.data.text]
                      }}</span>
                      <span v-if="cond.type == 'checkbox' && cond.keyNum == 1">
                        <span v-for="(item, ind1) in queryData[cond.key]" :key="ind1">
                          {{
                            ind1 == 0
                              ? dictOptions[cond.data.data].filter((dt) => {
                                  return dt[cond.data.value] == item
                                })[0][cond.data.text]
                              : ',' +
                                dictOptions[cond.data.data].filter((dt) => {
                                  return dt[cond.data.value] == item
                                })[0][cond.data.text]
                          }}
                        </span>
                      </span>
                      <span v-if="cond.type == 'selectAndInput' && cond.keyNum == 2">
                        {{ queryData[cond.key + 'Query'] + queryData[cond.key] }}
                      </span>
                      <span v-if="cond.type == 'select' && (cond.keyNum == 4 || cond.keyNum == 7)">
                        <span v-for="(item, ind1) in cond.datas" :key="ind1">
                          {{
                            item.unit
                              ? item.type == 'select'
                                ? queryData[item.key] + item.unit
                                : item.unit
                              : item.type == 'select'
                              ? queryData[item.key]
                              : item.unit
                          }}
                        </span>
                      </span>
                      <span v-if="cond.type == 'date' && cond.keyNum == 2">
                        {{
                          moment(queryData[cond.key + 'Begin']).format('YYYY-MM-DD') +
                          '~' +
                          moment(queryData[cond.key + 'End']).format('YYYY-MM-DD')
                        }}
                      </span>
                    </div>
                  </a-tag>
                </div>
                <div class="screen-condition" style="width: 400px">
                  <div style="margin-bottom: 10px" v-for="(cond, ind) in secItems" :key="ind">
                    <div style="display: flex; justify-content: space-between; align-items: center; padding: 2px 0">
                      {{ cond.label
                      }}<a-icon type="close" v-if="cond.isClose" @click="delCond(ind)" style="color: #1890ff" />
                    </div>
                    <a-input v-model="queryData[cond.key]" v-if="cond.type == 'input' && cond.keyNum == 1" />
                    <a-select
                      v-model="queryData[cond.key]"
                      style="width: 100%"
                      v-if="cond.type == 'select' && cond.keyNum == 1"
                    >
                      <a-select-option
                        v-for="(item, ind) in dictOptions[cond.data.data]"
                        :key="ind"
                        :value="item[cond.data.value]"
                        >{{ item[cond.data.text] }}</a-select-option
                      >
                    </a-select>
                    <a-checkbox-group
                      v-model="queryData[cond.key]"
                      style="width: 100%; text-align: left"
                      v-if="cond.type == 'checkbox' && cond.keyNum == 1"
                    >
                      <a-checkbox
                        v-for="(item, ind) in dictOptions[cond.data.data]"
                        :key="ind"
                        :value="item[cond.data.value]"
                        style="width: 50%; vertical-align: top"
                        >{{ item[cond.data.text] }}</a-checkbox
                      >
                    </a-checkbox-group>
                    <div style="display: flex" v-if="cond.type == 'selectAndInput' && cond.keyNum == 2">
                      <a-select v-model="queryData[cond.key + 'Query']" style="width: 200px">
                        <a-select-option value=">">{{ $t('大于') }}</a-select-option>
                        <a-select-option value=">=">{{ $t('大于等于') }}</a-select-option>
                        <a-select-option value="=">{{ $t('等于') }}</a-select-option>
                        <a-select-option value="<=">{{ $t('小于等于') }}</a-select-option>
                        <a-select-option value="<">{{ $t('小于') }}</a-select-option>
                      </a-select>
                      <a-input v-model="queryData[cond.key]" style="margin-left: 4px" />
                      <span style="padding: 2px" v-if="cond.unit">{{ cond.unit }}</span>
                    </div>
                    <div
                      style="display: flex; align-items: center"
                      v-if="cond.type == 'select' && (cond.keyNum == 4 || cond.keyNum == 7)"
                    >
                      <div v-for="(ele, ind1) in cond.datas" :key="ind1" :style="{ width: ele.width }">
                        <a-select
                          v-show="ele.type == 'select'"
                          v-model="queryData[ele.key]"
                          @change="ele.changeEvent"
                          style="width: 100%"
                        >
                          <a-select-option
                            v-for="(item, ind2) in ele.data"
                            :key="ind2"
                            :value="item.value ? item.value : item"
                            >{{
                              ele.unit ? $t((item.text ? item.text : item) + ele.unit) : item.text ? item.text : item
                            }}</a-select-option
                          > </a-select
                        ><span v-show="ele.type == 'text'" style="padding: 2px">{{ ele.unit }}</span>
                      </div>
                    </div>
                    <div style="display: flex; align-items: center" v-if="cond.type == 'date' && cond.keyNum == 2">
                      <a-date-picker
                        v-model="queryData[cond.key + 'Begin']"
                        format="YYYY-MM-DD"
                        value-format="YYYY-MM-DD 00:00:00"
                      ></a-date-picker>
                      <span style="padding: 2px">~</span>
                      <a-date-picker
                        v-model="queryData[cond.key + 'End']"
                        format="YYYY-MM-DD"
                        value-format="YYYY-MM-DD 23:59:59"
                      ></a-date-picker>
                    </div>
                  </div>
                  <div @click="moreCond" style="padding: 4px 0; text-align: left; color: #1890ff">
                    {{ $t('更多条件') }}
                  </div>
                </div>
              </div>
              <div class="cond-btn">
                <a-button
                  @click="resetCondition"
                  style="margin-right: 6px; background-color: #fff; border-color: #169bd5; color: #169bd5"
                  >{{ $t('清除条件') }}</a-button
                ><a-button
                  @click="screenCondition"
                  style="background-color: #169bd5; border-color: #169bd5; color: #fff"
                  >{{ $t('筛选') }}</a-button
                >
              </div>
            </div>
          </div>
        </a-col>
      </a-row>
    </div>
    <div>
      <a-table
        class="tdclass"
        ref="table"
        rowKey="memberId"
        size="middle"
        bordered
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :customHeaderRow="customHeaderRow"
        :customRow="customRow"
        :scroll="{ x: true }"
        @change="handleTableChange"
        :rowSelection="rowSelection"
      >
        <template slot="htmlSlot" slot-scope="text">
          <div v-html="text"></div>
        </template>
        <template slot="imgSlot" slot-scope="text">
          <span v-if="!text" style="font-size: 12px; font-style: italic">{{ $t('无此图片') }}</span>
          <img
            v-else
            :src="getImgView(text)"
            height="25px"
            :alt="$t('图片不存在')"
            style="max-width: 80px; font-size: 12px; font-style: italic"
          />
        </template>
        <template slot="fileSlot" slot-scope="text">
          <span v-if="!text" style="font-size: 12px; font-style: italic">{{ $t('无此文件') }}</span>
          <a-button v-else :ghost="true" type="primary" icon="download" size="small" @click="uploadFile(text)">{{
            $t('下载')
          }}</a-button>
        </template>
      </a-table>
    </div>
    <set-column-two-modal
      ref="setColumn"
      @setColumn="getData"
      :pageName="pageName"
      :setcolumns="setcolumns"
      :setcolumnsgroup="setcolumnsgroup"
      :secCols="secCols"
    ></set-column-two-modal>
    <more-cond-modal
      ref="moreCondModal"
      @setCond="getCondData"
      :setconds="setcolumns"
      :setcondsgroup="setcolumnsgroup"
      :secConds="secConds"
    ></more-cond-modal>
    <account-sum-modal ref="accountModal"></account-sum-modal>
    <send-coupon-modal ref="sendForm" @ok="onClearSelected"></send-coupon-modal>
  </a-card>
</template>
<script>
var f = (length, num) => Array.from({ length }).map((v, k) => k + num)
let regYear
const formItemLayout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 17 },
}
import moment from 'moment'
import { getAction } from '@/api/manage'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { initDictOptions, filterMultiDictText } from '@/components/dict/JDictSelectUtil'
import SetColumnTwoModal from '@/components/SetColumnTwoModal'
import MoreCondModal from './modules/MoreCondModal'
import AccountSumModal from './modules/AccountSumModal'
import SendCouponModal from '../marketingmanage/modules/SendCouponModal'
let _self

export default {
  name: 'MemberPortrait',
  mixins: [JeecgListMixin],
  components: { SetColumnTwoModal, MoreCondModal, AccountSumModal, SendCouponModal },
  computed: {
    rowSelection() {
      return {
        selectedRowKeys: this.selectedRowKeys,
        onChange: (selectedRowKeys, selectionRows) => {
          this.selectedRowKeys = selectedRowKeys
          this.selectionRows = selectionRows
        },
      }
    },
  },
  data() {
    return {
      pageName: '会员画像',
      moment,
      description: '会员画像页面',
      url: {
        list: '/memberInfoDrawing/list',
        exportXlsUrl: '/memberInfoDrawing/exportXls',
      },
      queryData: {
        sex: '',
        coinQuery: '>',
        lotteryQuery: '>',
        integralQuery: '>',
        aCoinQuery: '>',
        aLotteryQuery: '>',
        voucherCountQuery: '>',
        limitCoinCountQuery: '>',
        ticketCountQuery: '>',
        arrivalStoreInThreeMonthQuery: '>',
        arrivalStoreInOneYearQuery: '>',
        avgConsumeAmountInThreeMonthQuery: '>',
        avgConsumeAmountInOneYearQuery: '>',
        sumConsumeAmountInThreeMonthQuery: '>',
        sumConsumeAmountInOneYearQuery: '>',
        lastConsumeHowFarQuery: '>',
        storedValueNumQuery: '>',
        sumRechargePriceQuery: '>',
        sumRechargeCoinQuery: '>',
        lastRechargeAmountQuery: '>',
        regHowFarQuery: '>',
        loginNumInOneMonthQuery: '>',
        shareNumInOneMonthQuery: '>',
      },
      setcolumnsgroup: [
        { id: '1', name: this.$t('基本属性'), col: 5 },
        { id: '2', name: this.$t('账户属性'), col: 5 },
        { id: '3', name: this.$t('消费属性'), col: 4 },
        { id: '4', name: this.$t('储值属性'), col: 4 },
        { id: '5', name: this.$t('会员行为'), col: 4 },
      ],
      setcolumns: [
        {
          columnId: 'cardNo',
          align: 'center',
          sort: 1,
          width: 80,
          group: '1',
          disable: true,
          cusQuery: true,
        },
        {
          columnId: 'phone',
          align: 'center',
          sort: 2,
          width: 90,
          group: '1',
          disable: true,
          cusQuery: true,
        },
        {
          columnId: 'name',
          align: 'center',
          sort: 3,
          width: 120,
          group: '1',
          cusQuery: true,
        },
        {
          columnId: 'sex',
          align: 'center',
          sort: 4,
          width: 60,
          customRender: function (t, r, i) {
            return r.sex_dictText
          },
          group: '1',
          cusQuery: true,
        },
        {
          columnId: 'birthday',
          align: 'center',
          sort: 5,
          width: 100,
          group: '1',
          cusQuery: true,
        },
        {
          columnId: 'certno',
          align: 'center',
          sort: 6,
          width: 160,
          group: '1',
          cusQuery: true,
        },
        {
          columnId: 'source',
          align: 'center',
          sort: 7,
          width: 120,
          customRender: function (t, r, i) {
            return r.source_dictText
          },
          group: '1',
          cusQuery: true,
        },
        {
          columnId: 'channel',
          align: 'center',
          sort: 8,
          width: 120,
          customRender: function (t, r, i) {
            return r.channel_dictText
          },
          group: '1',
          cusQuery: true,
        },
        {
          columnId: 'regDate',
          align: 'center',
          sort: 9,
          width: 150,
          group: '1',
          cusQuery: true,
        },
        {
          columnId: 'coin',
          align: 'right',
          sort: 10,
          width: 100,
          group: '2',
          cusQuery: true,
          customRender: (text, r) => {
            text = (text ==null || text =="" || text ==undefined)?0:parseFloat(text);
            return text.toFixed(2);
          }
        },
        {
          columnId: 'lottery',
          align: 'right',
          sort: 11,
          width: 100,
          group: '2',
          cusQuery: true,
          customRender: (text, r) => {
            text = (text ==null || text =="" || text ==undefined)?0:parseFloat(text);
            return text.toFixed(0);
          }
        },
        {
          columnId: 'integral',
          align: 'right',
          sort: 12,
          width: 100,
          group: '2',
          cusQuery: true,
          customRender: (text, r) => {
            text = (text ==null || text =="" || text ==undefined)?0:parseFloat(text);
            return text.toFixed(0);
          }
        },
        {
          columnId: 'aCoin',
          align: 'right',
          sort: 13,
          width: 100,
          group: '2',
          cusQuery: true,
          customRender: (text, r) => {
            text = (text ==null || text =="" || text ==undefined)?0:parseFloat(text);
            return text.toFixed(0);
          }
        },
        {
          columnId: 'aLottery',
          align: 'right',
          sort: 14,
          width: 100,
          group: '2',
          cusQuery: true,
          customRender: (text, r) => {
            text = (text ==null || text =="" || text ==undefined)?0:parseFloat(text);
            return text.toFixed(0);
          }
        },
        {
          columnId: 'voucherCount',
          align: 'right',
          sort: 15,
          width: 100,
          group: '2',
          cusQuery: true,
          customRender: (text, r) => {
            text = (text ==null || text =="" || text ==undefined)?0:parseFloat(text);
            return text.toFixed(0);
          }
        },
        {
          columnId: 'ticketCount',
          align: 'right',
          sort: 16,
          width: 100,
          group: '2',
          cusQuery: true,
          customRender: (text, r) => {
            text = (text ==null || text =="" || text ==undefined)?0:parseFloat(text);
            return text.toFixed(0);
          }
        },
        {
          columnId: 'limitCoinCount',
          align: 'right',
          sort: 17,
          width: 100,
          group: '2',
          cusQuery: true,
          customRender: (text, r) => {
            text = (text ==null || text =="" || text ==undefined)?0:parseFloat(text);
            return text.toFixed(0);
          }
        },
        {
          columnId: 'memberType',
          align: 'center',
          sort: 18,
          width: 120,
          customRender: function (t, r, i) {
            return r.memberType_dictText
          },
          group: '2',
          cusQuery: true,
        },
        {
          columnId: 'arrivalStoreInThreeMonth',
          align: 'right',
          sort: 18,
          width: 120,
          group: '3',
          cusQuery: true,
          customRender: (text, r) => {
            text = (text ==null || text =="" || text ==undefined)?0:parseFloat(text);
            return text.toFixed(0);
          }
        },
        {
          columnId: 'arrivalStoreInOneYear',
          align: 'right',
          sort: 19,
          width: 120,
          group: '3',
          cusQuery: true,
          customRender: (text, r) => {
            text = (text ==null || text =="" || text ==undefined)?0:parseFloat(text);
            return text.toFixed(0);
          }
        },
        {
          columnId: 'sumConsumeAmountInThreeMonth',
          align: 'right',
          sort: 20,
          width: 140,
          group: '3',
          cusQuery: true,
          customRender: (text, r) => {
            text = (text ==null || text =="" || text ==undefined)?0:parseFloat(text);
            return text.toFixed(0);
          }
        },
        {
          columnId: 'sumConsumeAmountInOneYear',
          align: 'right',
          sort: 21,
          width: 140,
          group: '3',
          cusQuery: true,
          customRender: (text, r) => {
            text = (text ==null || text =="" || text ==undefined)?0:parseFloat(text);
            return text.toFixed(0);
          }
        },
        {
          columnId: 'avgConsumeAmountInThreeMonth',
          align: 'right',
          sort: 22,
          width: 120,
          group: '3',
          cusQuery: true,
          customRender: (text, r) => {
            text = (text ==null || text =="" || text ==undefined)?0:parseFloat(text);
            return text.toFixed(0);
          }
        },
        {
          columnId: 'avgConsumeAmountInOneYear',
          align: 'right',
          sort: 23,
          width: 120,
          group: '3',
          cusQuery: true,
          customRender: (text, r) => {
            text = (text ==null || text =="" || text ==undefined)?0:parseFloat(text);
            return text.toFixed(0);
          }
        },
        {
          columnId: 'firstConsumeTime',
          align: 'center',
          sort: 24,
          width: 150,
          group: '3',
          cusQuery: true,
        },
        {
          columnId: 'lastConsumeTime',
          align: 'center',
          sort: 25,
          width: 150,
          group: '3',
          cusQuery: true,
        },
        {
          columnId: 'lastConsumeHowFar',
          align: 'center',
          sort: 26,
          width: 180,
          customRender: (t, r, i) => {
            if (r.lastTicketTime) {
              let m1 = moment(r.lastTicketTime, 'YYYY-MM-DD')
              let m2 = moment(new Date())
              let duration = moment.duration(m2.diff(m1))
              let year = duration._data.years
              let month = duration._data.months
              let day = duration._data.days
              let howFar =
                (year == 0 ? '' : year + _self.$t('年')) +
                (month == 0 ? '' : month + _self.$t('月')) +
                (day == 0 ? (year == 0 && month == 0 ? _self.$t('0天') : '') : day + _self.$t('天'))
              return howFar
            } else {
              return t
            }
          },
          group: '3',
          cusQuery: true,
        },
        {
          columnId: 'storedValueNum',
          align: 'right',
          sort: 27,
          width: 120,
          group: '4',
          cusQuery: true,
          customRender: (text, r) => {
            text = (text ==null || text =="" || text ==undefined)?0:parseFloat(text);
            return text.toFixed(0);
          }
        },
        {
          columnId: 'sumRechargePrice',
          align: 'right',
          sort: 28,
          width: 120,
          group: '4',
          cusQuery: true,
          customRender: (text, r) => {
            text = (text ==null || text =="" || text ==undefined)?0:parseFloat(text);
            return text.toFixed(2);
          }
        },
        {
          columnId: 'sumRechargeCoin',
          align: 'right',
          sort: 29,
          width: 120,
          group: '4',
          cusQuery: true,
          customRender: (text, r) => {
            text = (text ==null || text =="" || text ==undefined)?0:parseFloat(text);
            return text.toFixed(2);
          }
        },
        {
          columnId: 'lastRechargeTime',
          align: 'center',
          sort: 30,
          width: 150,
          scopedSlots: { customRender: 'lastRechargeTime' },
          group: '4',
          cusQuery: true,
        },
        {
          columnId: 'lastRechargeAmount',
          align: 'center',
          sort: 31,
          width: 140,
          scopedSlots: { customRender: 'lastRechargeAmount' },
          group: '4',
          cusQuery: true,
        },
        {
          columnId: 'regHowFar',
          align: 'center',
          sort: 32,
          width: 120,
          customRender: (t, r, i) => {
            if (r.regDate) {
              let m1 = moment(r.regDate, 'YYYY-MM-DD')
              let m2 = moment(new Date())
              let duration = moment.duration(m2.diff(m1))
              let year = duration._data.years
              let month = duration._data.months
              let day = duration._data.days
              let howFar =
                (year == 0 ? '' : year + _self.$t('年')) +
                (month == 0 ? '' : month + _self.$t('月')) +
                (day == 0 ? (year == 0 && month == 0 ? _self.$t('0天') : '') : day + _self.$t('天'))
              return howFar
            } else {
              return t
            }
          },
          group: '5',
          cusQuery: true,
        },
        {
          columnId: 'loginNumInOneMonth',
          align: 'right',
          sort: 33,
          width: 160,
          group: '5',
          cusQuery: true,
          customRender: (text, r) => {
            text = (text ==null || text =="" || text ==undefined)?0:parseFloat(text);
            return text.toFixed(0);
          }
        },
        {
          columnId: 'shareNumInOneMonth',
          align: 'right',
          sort: 34,
          width: 120,
          group: '5',
          cusQuery: true,
          customRender: (text, r) => {
            text = (text ==null || text =="" || text ==undefined)?0:parseFloat(text);
            return text.toFixed(0);
          }
        },
      ],
      secCols: [],
      columns: [],
      dataSource: [],
      dictOptions: {
        sex: [],
        source: [],
        channel: [],
      },
      visible: false,
      formItemLayout,
      monthList: f(12, 1),
      yearList: f(moment().year() - 1899, 1900),
      dayList: [],
      regDayList: [],
      defItems: [
        'cardNo',
        'phone',
        'name',
        'sex',
        'birthday',
        'certno',
        'regDate',
        'source',
        'channel',
        'coin',
        'lottery',
        'integral',
        'aCoin',
        'aLottery',
        'voucherCount',
        'ticketCount',
        'limitCoinCount',
      ],
      formItems: [
        { label: this.$t('卡号'), keyNum: 1, type: 'input', isClose: true, key: 'cardNo' },
        { label: this.$t('手机号'), keyNum: 1, type: 'input', isClose: true, key: 'phone' },
        { label: this.$t('姓名'), keyNum: 1, type: 'input', isClose: true, key: 'name' },
        {
          label: this.$t('性别'),
          keyNum: 1,
          type: 'select',
          isClose: true,
          key: 'sex',
          data: { data: 'sex', value: 'value', text: 'text' },
        },
        {
          label: this.$t('生日'),
          keyNum: 4,
          type: 'select',
          isClose: true,
          key: 'birthday',
          datas: [
            {
              key: 'birthMonth1',
              data: f(12, 1),
              unit: this.$t('月'),
              type: 'select',
              changeEvent: this.changeBirthMonth,
              width: '25%',
            },
            { key: 'birthDay1', data: f(31, 1), unit: this.$t('日'), type: 'select', width: '25%' },
            { unit: '~', type: 'text', width: '20px' },
            {
              key: 'birthMonth2',
              data: f(12, 1),
              unit: this.$t('月'),
              type: 'select',
              changeEvent: this.changeBirthMonth,
              width: '25%',
            },
            { key: 'birthDay2', data: f(31, 1), unit: this.$t('日'), type: 'select', width: '25%' },
          ],
        },
        { label: this.$t('身份证号'), keyNum: 1, type: 'input', isClose: true, key: 'certno' },
        {
          label: this.$t('账户来源'),
          keyNum: 1,
          type: 'checkbox',
          isClose: true,
          key: 'source',
          data: { data: 'source', value: 'value', text: 'text' },
        },
        {
          label: this.$t('注册渠道'),
          keyNum: 1,
          type: 'checkbox',
          isClose: true,
          key: 'channel',
          data: { data: 'channel', value: 'value', text: 'text' },
        },
        {
          label: this.$t('注册时间'),
          keyNum: 2,
          type: 'date',
          isClose: true,
          key: 'regDate',
        },
        { label: this.$t('币'), keyNum: 2, type: 'selectAndInput', isClose: true, key: 'coin' },
        { label: this.$t('彩票'), keyNum: 2, type: 'selectAndInput', isClose: true, key: 'lottery' },
        { label: this.$t('积分'), keyNum: 2, type: 'selectAndInput', isClose: true, key: 'integral' },
        { label: this.$t('A币'), keyNum: 2, type: 'selectAndInput', isClose: true, key: 'aCoin' },
        { label: this.$t('A票'), keyNum: 2, type: 'selectAndInput', isClose: true, key: 'aLottery' },
        { label: this.$t('优惠券张数'), keyNum: 2, type: 'selectAndInput', isClose: true, key: 'voucherCount' },
        { label: this.$t('门票张数'), keyNum: 2, type: 'selectAndInput', isClose: true, key: 'ticketCount' },
        { label: this.$t('限时币数量'), keyNum: 2, type: 'selectAndInput', isClose: true, key: 'limitCoinCount' },
        {
          label: this.$t('会员类型'),
          keyNum: 1,
          type: 'checkbox',
          isClose: true,
          key: 'memberType',
          data: { data: 'memberTypes', value: 'value', text: 'text' },
        },
        {
          label: this.$t('近3月到店次数'),
          keyNum: 2,
          type: 'selectAndInput',
          isClose: true,
          key: 'arrivalStoreInThreeMonth',
        },
        {
          label: this.$t('近1年到店次'),
          keyNum: 2,
          type: 'selectAndInput',
          isClose: true,
          key: 'arrivalStoreInOneYear',
        },
        {
          label: this.$t('近3月累计消费金额'),
          keyNum: 2,
          type: 'selectAndInput',
          isClose: true,
          key: 'sumConsumeAmountInThreeMonth',
        },
        {
          label: this.$t('近1年累计消费金额'),
          keyNum: 2,
          type: 'selectAndInput',
          isClose: true,
          key: 'sumConsumeAmountInOneYear',
        },
        {
          label: this.$t('近3月平均消费金额'),
          keyNum: 2,
          type: 'selectAndInput',
          isClose: true,
          key: 'avgConsumeAmountInThreeMonth',
        },
        {
          label: this.$t('近1年平均消费金额'),
          keyNum: 2,
          type: 'selectAndInput',
          isClose: true,
          key: 'avgConsumeAmountInOneYear',
        },
        { label: this.$t('第一次消费时间'), keyNum: 2, type: 'date', isClose: true, key: 'firstConsumeTime' },
        { label: this.$t('最近一次消费时间'), keyNum: 2, type: 'date', isClose: true, key: 'lastConsumeTime' },
        {
          label: this.$t('最近一次消费距现在x天'),
          keyNum: 2,
          type: 'selectAndInput',
          isClose: true,
          key: 'lastConsumeHowFar',
        },
        {
          label: this.$t('储值次数'),
          keyNum: 2,
          type: 'selectAndInput',
          isClose: true,
          key: 'storedValueNum',
        },
        {
          label: this.$t('累计充值金额'),
          keyNum: 2,
          type: 'selectAndInput',
          isClose: true,
          key: 'sumRechargePrice',
        },
        {
          label: this.$t('累计充值币值'),
          keyNum: 2,
          type: 'selectAndInput',
          isClose: true,
          key: 'sumRechargeCoin',
        },
        { label: this.$t('最后一次储值时间'), keyNum: 2, type: 'date', isClose: true, key: 'lastRechargeTime' },
        {
          label: this.$t('最后一次储值金额'),
          keyNum: 2,
          type: 'selectAndInput',
          isClose: true,
          key: 'lastRechargeAmount',
        },
        {
          label: this.$t('注册时长'),
          keyNum: 7,
          type: 'select',
          isClose: true,
          key: 'regHowFar',
          datas: [
            {
              key: 'regHowFarQuery',
              data: [
                { value: '>', text: this.$t('大于') },
                { value: '>=', text: this.$t('大于等于') },
                { value: '=', text: this.$t('等于') },
                { value: '<=', text: this.$t('小于等于') },
                { value: '<', text: this.$t('小于') },
              ],
              type: 'select',
              width: '160px',
            },
            {
              key: 'regYaer',
              data: f(moment().year() - 1899, 1900),
              type: 'select',
              changeEvent: this.changeRegYear,
              width: '30%',
            },
            { unit: this.$t('年'), type: 'text', width: '30px' },
            {
              key: 'regMonth',
              data: f(12, 1),
              type: 'select',
              changeEvent: this.changeRegMonth,
              width: '20%',
            },
            { unit: this.$t('月'), type: 'text', width: '30px' },
            {
              key: 'regDay',
              data: f(31, 1),
              type: 'select',
              width: '20%',
            },
            { unit: this.$t('日'), type: 'text', width: '30px' },
          ],
        },
        {
          label: this.$t('近1月小程序登录次数'),
          keyNum: 2,
          type: 'selectAndInput',
          isClose: true,
          key: 'loginNumInOneMonth',
        },
        {
          label: this.$t('近1月分享次数'),
          keyNum: 2,
          type: 'selectAndInput',
          isClose: true,
          key: 'shareNumInOneMonth',
        },
      ],
      secItems: [],
      condItems: [],
      secConds: [],
      isCustom: true,
    }
  },
  created() {
    _self = this
  },
  mounted() {
    this.visible = false
    this.getSetColumn()
    if (
      localStorage.getItem('mScreenCond') != undefined &&
      localStorage.getItem('mScreenCond') != null &&
      localStorage.getItem('mScreenCond') != ''
    ) {
      this.secItems = JSON.parse(localStorage.getItem('mScreenCond'))
    } else {
      this.secItems = []
      this.defItems.forEach((dt) => {
        this.secItems.push(
          this.formItems.filter((ft) => {
            return ft.key == dt
          })[0]
        )
      })
    }
    this.secConds = []
    this.secItems.forEach((si) => {
      this.secConds.push(
        this.setcolumns.filter((sc) => {
          return sc.columnId == si.key
        })[0]
      )
    })
    if (
      localStorage.getItem('mQueryData') != undefined &&
      localStorage.getItem('mQueryData') != null &&
      localStorage.getItem('mQueryData') != ''
    ) {
      this.queryData = JSON.parse(localStorage.getItem('mQueryData'))
    } else {
      this.queryData = {
        sex: '',
        coinQuery: '>',
        lotteryQuery: '>',
        integralQuery: '>',
        aCoinQuery: '>',
        aLotteryQuery: '>',
        voucherCountQuery: '>',
        limitCoinCountQuery: '>',
        ticketCountQuery: '>',
        arrivalStoreInThreeMonthQuery: '>',
        arrivalStoreInOneYearQuery: '>',
        avgConsumeAmountInThreeMonthQuery: '>',
        avgConsumeAmountInOneYearQuery: '>',
        sumConsumeAmountInThreeMonthQuery: '>',
        sumConsumeAmountInOneYearQuery: '>',
        lastConsumeHowFarQuery: '>',
        storedValueNumQuery: '>',
        sumRechargePriceQuery: '>',
        sumRechargeCoinQuery: '>',
        lastRechargeAmountQuery: '>',
        regHowFarQuery: '>',
        loginNumInOneMonthQuery: '>',
        shareNumInOneMonthQuery: '>',
      }
    }
    this.queryParam = Object.assign({}, this.queryData)
    let regHowFarQuery = this.queryParam.regHowFarQuery
    this.queryParam.regHowFarQuery =
      regHowFarQuery == '>'
        ? '<='
        : regHowFarQuery == '>='
        ? '<'
        : regHowFarQuery == '<='
        ? '>'
        : regHowFarQuery == '<'
        ? '>='
        : '='
    this.screenCondition()
  },
  methods: {
    initDictConfig() {
      let that = this
      initDictOptions('bis_member.sex').then((res) => {
        if (res.success) {
          that.$set(that.dictOptions, 'sex', res.result)
          that.dictOptions.sex.unshift({ value: '', text: that.$t('全部') })
        }
      })
      initDictOptions('bis_member_infor.source').then((res) => {
        if (res.success) {
          that.$set(that.dictOptions, 'source', res.result)
        }
      })
      initDictOptions('bis_device_info.type').then((res) => {
        if (res.success) {
          that.$set(that.dictOptions, 'channel', res.result)
        }
      })
      getAction('/member/bisMemberRule/list', { notNonmember: 1, manageState: 'Y', pageSize: 40 }).then((res) => {
        if (res.success) {
          let result = res.result.records.map((rds) => {
            let dtl = {
              value: rds.id,
              text: rds.name,
            }
            return dtl
          })
          that.$set(that.dictOptions, 'memberTypes', result)
          return
        }
      })
    },
    getSetColumn() {
      let that = this,
        querydata = {}
      querydata.pageName = '会员画像'
      getAction('/pageSetting/getSetting', querydata).then((res) => {
        if (res.success) {
          that.getData(res.result)
        } else {
          that.$message.error(res.message)
        }
      })
    },
    getData(val) {
      let that = this
      if (val == '') {
        that.getSetColumn()
        return
      }
      that.columns = []
      that.secCols = []
      let arr,
        columns = []
      arr = val
      this.setcolumns.forEach((col, index) => {
        let y = arr.findIndex((ele) => {
          return col.columnId == ele.columnId
        })
        if (y >= 0) {
          col.columnName = this.$t(arr[y].columnName)
          col.isdefault = arr[y].isdefault
          col.displayFlag = arr[y].displayFlag
          col.sort = arr[y].sort
        }
      })
      this.setcolumns.sort(function (a, b) {
        return a.sort - b.sort
      })
      arr.sort(function (a, b) {
        return a.sort - b.sort
      })
      arr.forEach((col, index) => {
        if (col.displayFlag == 1) {
          let x = this.setcolumns.findIndex((ele) => {
            return col.columnId == ele.columnId
          })
          if (x >= 0) {
            columns.push(this.setcolumns[x])
            this.secCols.push(this.setcolumns[x])
          }
        }
      })
      columns.forEach((ele) => {
        let dtl = {}
        dtl.title = ele.columnName
        dtl.dataIndex = ele.columnId
        dtl.key = ele.columnId
        dtl.isText = ele.isText
        if (ele.width != undefined) {
          dtl.customHeaderCell = (column) => ({
            style: {
              textAlign: 'center',
              minWidth: ele.width + 'px',
            },
          })
        } else {
          dtl.customHeaderCell = (column) => ({
            style: {
              textAlign: 'center',
            },
          })
        }
        dtl.customCell = (record, rowIndex) => ({
          style: {
            textAlign: ele.align,
          },
        })
        if (ele.customRender) {
          dtl.customRender = ele.customRender
        }
        if (ele.scopedSlots) {
          dtl.scopedSlots = ele.scopedSlots
        }
        this.columns.push(dtl)
      })
    },
    hide() {
      this.visible = false
    },
    resetCondition() {
      this.queryData = {
        sex: '',
        coinQuery: '>',
        lotteryQuery: '>',
        integralQuery: '>',
        aCoinQuery: '>',
        aLotteryQuery: '>',
        voucherCountQuery: '>',
        limitCoinCountQuery: '>',
        ticketCountQuery: '>',
        arrivalStoreInThreeMonthQuery: '>',
        arrivalStoreInOneYearQuery: '>',
        avgConsumeAmountInThreeMonthQuery: '>',
        avgConsumeAmountInOneYearQuery: '>',
        sumConsumeAmountInThreeMonthQuery: '>',
        sumConsumeAmountInOneYearQuery: '>',
        lastConsumeHowFarQuery: '>',
        storedValueNumQuery: '>',
        sumRechargePriceQuery: '>',
        sumRechargeCoinQuery: '>',
        lastRechargeAmountQuery: '>',
        regHowFarQuery: '>',
        loginNumInOneMonthQuery: '>',
        shareNumInOneMonthQuery: '>',
      }
      localStorage.removeItem('mQueryData')
      this.condItems = []
      this.hide()
      this.queryParam = Object.assign({}, { isQs: true }, this.queryData)
      let regHowFarQuery = this.queryParam.regHowFarQuery
      this.queryParam.regHowFarQuery =
        regHowFarQuery == '>'
          ? '<='
          : regHowFarQuery == '>='
          ? '<'
          : regHowFarQuery == '<='
          ? '>'
          : regHowFarQuery == '<'
          ? '>='
          : '='
      this.searchQuery()
    },
    screenCondition() {
      let that = this
      if (
        this.queryData.birthMonth1 &&
        this.queryData.birthMonth2 &&
        this.queryData.birthDay1 &&
        this.queryData.birthDay2
      ) {
        this.queryData.birthdayBegin = this.queryData.birthMonth1 + '-' + this.queryData.birthDay1
        this.queryData.birthdayEnd = this.queryData.birthMonth2 + '-' + this.queryData.birthDay2
      }
      if (this.queryData.regYaer && this.queryData.regMonth && this.queryData.regDay) {
        let m1 = moment()
        let m2 = moment(
          this.queryData.regYaer + '-' + this.queryData.regMonth + '-' + this.queryData.regDay,
          'YYYY-MM-DD'
        )
        this.queryData.regHowFar = m1.diff(m2, 'day') // + 1
      }
      this.condItems = []
      for (var key in this.queryData) {
        if (key.indexOf('Query') < 0) {
          let datas = []
          if (key.indexOf('Begin') > -1) {
            key = key.replace('Begin', '')
            datas = this.secItems.filter((si) => {
              return si.key == key
            })
          } else {
            datas = this.secItems.filter((si) => {
              return si.key == key
            })
          }
          if (datas.length > 0) {
            this.condItems.push(datas[0])
          }
        }
      }
      if (this.queryData.source && this.queryData.source.length > 0) {
        this.queryData.sources = this.queryData.source
      }
      if (this.queryData.channel && this.queryData.channel.length > 0) {
        this.queryData.regChannels = this.queryData.channel
      }
      if (this.queryData.memberType && this.queryData.memberType.length > 0) {
        this.queryData.memberTypes = this.queryData.memberType
      }
      this.hide()
      localStorage.setItem('mQueryData', JSON.stringify(that.queryData))
      this.queryParam = Object.assign({}, { isQs: true }, this.queryData)
      let regHowFarQuery = this.queryParam.regHowFarQuery
      this.queryParam.regHowFarQuery =
        regHowFarQuery == '>'
          ? '<='
          : regHowFarQuery == '>='
          ? '<'
          : regHowFarQuery == '<='
          ? '>'
          : regHowFarQuery == '<'
          ? '>='
          : '='
      delete this.queryParam.source
      delete this.queryParam.channel
      delete this.queryParam.memberType
      this.searchQuery()
    },
    changeBirthMonth(val) {
      let that = this,
        arr1 = [1, 3, 5, 7, 8, 10, 12],
        arr2 = [4, 6, 9, 18]
      let x = arr1.findIndex((a) => {
        return a == val
      })
      let y = arr2.findIndex((a) => {
        return a == val
      })
      if (x > -1) {
        that.dayList = f(31, 1)
        return
      }
      if (y > -1) {
        that.dayList = f(30, 1)
        return
      }
      that.dayList = f(29, 1)
    },
    disabledDate(current) {
      return current < moment().endOf('day')
    },
    changeRegYear(val) {
      regYear = val
    },
    changeRegMonth(val) {
      let that = this
      that.regDayList = f(moment(regYear + '-' + val, 'YYYY-MM').daysInMonth(), 1)
    },
    delCond(ind) {
      this.secItems.splice(ind, 1)
      this.secConds = []
      this.secItems.forEach((si) => {
        this.secConds.push(
          this.setcolumns.filter((sc) => {
            return sc.columnId == si.key
          })[0]
        )
      })
      localStorage.setItem('mScreenCond', JSON.stringify(this.secItems))
    },
    moreCond() {
      this.$refs.moreCondModal.edit()
    },
    getCondData(val) {
      this.secItems = []
      val.forEach((v) => {
        this.secItems.push(
          this.formItems.filter((ft) => {
            return ft.key == v.columnId
          })[0]
        )
      })
      this.secConds = []
      this.secItems.forEach((si) => {
        this.secConds.push(
          this.setcolumns.filter((sc) => {
            return sc.columnId == si.key
          })[0]
        )
      })
      localStorage.setItem('mScreenCond', JSON.stringify(this.secItems))
    },
    openCond() {
      let that = this
      that.visible = true
      if (
        localStorage.getItem('mQueryData') != undefined &&
        localStorage.getItem('mQueryData') != null &&
        localStorage.getItem('mQueryData') != ''
      ) {
        that.queryData = JSON.parse(localStorage.getItem('mQueryData'))
      } else {
        that.queryData = {
          sex: '',
          coinQuery: '>',
          lotteryQuery: '>',
          integralQuery: '>',
          aCoinQuery: '>',
          aLotteryQuery: '>',
          voucherCountQuery: '>',
          limitCoinCountQuery: '>',
          ticketCountQuery: '>',
          arrivalStoreInThreeMonthQuery: '>',
          arrivalStoreInOneYearQuery: '>',
          avgConsumeAmountInThreeMonthQuery: '>',
          avgConsumeAmountInOneYearQuery: '>',
          sumConsumeAmountInThreeMonthQuery: '>',
          sumConsumeAmountInOneYearQuery: '>',
          lastConsumeHowFarQuery: '>',
          storedValueNumQuery: '>',
          sumRechargePriceQuery: '>',
          sumRechargeCoinQuery: '>',
          lastRechargeAmountQuery: '>',
          regHowFarQuery: '>',
          loginNumInOneMonthQuery: '>',
          shareNumInOneMonthQuery: '>',
        }
      }
      if (that.queryData.sources && that.queryData.sources.length > 0) {
        that.queryData.source = that.queryData.sources
        delete that.queryData.sources
      } else {
        delete that.queryData.source
      }
      if (that.queryData.regChannels && that.queryData.regChannels.length > 0) {
        that.queryData.channel = that.queryData.regChannels
        delete that.queryData.regChannels
      } else {
        delete that.queryData.channel
      }
      if (that.queryData.memberTypes && that.queryData.memberTypes.length > 0) {
        that.queryData.memberType = that.queryData.memberTypes
        delete that.queryData.memberTypes
      } else {
        delete that.queryData.memberType
      }
      that.condItems = []
      for (var key in that.queryData) {
        if (key.indexOf('Query') < 0) {
          let datas = []
          if (key.indexOf('Begin') > -1) {
            key = key.replace('Begin', '')
            datas = that.secItems.filter((si) => {
              return si.key == key
            })
          } else {
            datas = that.secItems.filter((si) => {
              return si.key == key
            })
          }
          if (datas.length > 0) {
            that.condItems.push(datas[0])
          }
        }
      }
    },
    delConds(item, i) {
      let that = this
      that.condItems.splice(i, 1)
      if (item.type == 'date') {
        delete that.queryData[item.key + 'Begin']
        delete that.queryData[item.key + 'End']
      }
      if (item.key == 'sex') {
        that.queryData.sex = ''
      } else if (item.key == 'birthday') {
        delete that.queryData[item.key + 'Begin']
        delete that.queryData[item.key + 'End']
        delete that.queryData.birthMonth1
        delete that.queryData.birthDay1
        delete that.queryData.birthMonth2
        delete that.queryData.birthDay2
      } else if (item.key == 'regHowFar') {
        that.queryData.regHowFarQuery = '>'
        delete that.queryData.regYaer
        delete that.queryData.regMonth
        delete that.queryData.regDay
        delete that.queryData.regHowFar
      } else {
        delete that.queryData[item.key]
      }
      that.visible = false
      localStorage.setItem('mQueryData', JSON.stringify(that.queryData))
      that.queryParam = Object.assign({}, { isQs: true }, that.queryData)
      let regHowFarQuery = that.queryParam.regHowFarQuery
      that.queryParam.regHowFarQuery =
        regHowFarQuery == '>'
          ? '<='
          : regHowFarQuery == '>='
          ? '<'
          : regHowFarQuery == '<='
          ? '>'
          : regHowFarQuery == '<'
          ? '>='
          : '='
      that.searchQuery()
    },
    handleSetColumn() {
      this.$refs.setColumn.setColumnsClick()
    },
    accountShow() {
      this.$refs.accountModal.edit(this.queryParam)
    },
    prepareCoupon() {
      if (this.selectedRowKeys.length > 0) {
        let arr = this.selectionRows.map((row) => {
          row.memberCardNo = ''
          let dtl = {
            memberId: row.memberId,
            memberCardNo: row.cardNo,
            phone: row.phone,
            totalCoin: row.coin,
            name: row.name,
          }
          return dtl
        })
        this.$refs.sendForm.edit(arr)
      }
    },
  },
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>
<style>
.noArrow.ant-popover-placement-bottomRight > .ant-popover-content > .ant-popover-arrow {
  display: none;
}
.noArrow .ant-popover-inner-content {
  padding-top: 0;
}
.custom-condition-content {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  padding-bottom: 60px;
  background-color: #fff;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.custom-condition-content::-webkit-scrollbar {
  width: 0px;
  display: none;
}
.screen-condition .ant-checkbox-wrapper + .ant-checkbox-wrapper {
  margin-left: 0;
}
.cond-btn {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  padding: 10px;
  border-top: 1px solid #eee;
  text-align: right;
  z-index: 11;
}
.custom-condition-content .ant-tag .anticon-close {
  color: red;
}
</style>